<template>
  <div class="search-page">
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      shape="round"
    >
      <template #action>
        <div class="btn" @click="$router.back()">取消</div>
      </template>
    </van-search>
    <van-divider />
    <div class="history" v-if="show">
      <div class="top">
        <p class="search">搜索历史</p>
        <p class="delete" @click="del">删除</p>
      </div>
      <div class="center">
        <p>前端</p>
        <p>浏览器</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'search-page',
  data () {
    return {
      value: '',
      show: true
    }
  },
  methods: {
    onSearch () {
      console.log('搜索成功')
    },
    del () {
      this.show = false
    }
  }
}
</script>

<style lang="less" scoped>
.van-search{
  margin-top: 20px;
  padding-bottom: 0px;
}
.btn{
  color: #165DFF;
}
.van-divider{
  margin-bottom: 0;
}
.top{
  display: flex;
  justify-content:space-between;
  width: 100%;
  padding: 15px;
.search{
  width: 85%;
  font-size: 13px;
  color: #C9CDD4;
}
.delete{
  flex: 1;
  font-size: 12px;
  color: #86909C;
}
}
.center{
  display: flex;
  width: 100%;
  padding: 15px;
  padding-top: 0;
  p{
    height: 28px;
    text-align: center;
    line-height: 28px;
    background-color: #F2F3F5;
    border-radius: 4px;
    font-size: 12px;
    color: #4E5969;
    padding-right:8px;
    padding-left: 8px;
    margin-right: 8px;
  }
}
</style>
